<template>
    <div class="withdrawSwitch">
      <el-card class="item imgBox" v-if="!withdrawSwitch" style="min-width: 700px">
        <img src="@/assets/imgs/setting/withdraw.png" />
        <div class="hint1">您还没有提现审核功能，是否开通？</div>
        <div class="hint2">
            开启提现审核后，所有提现申请都需要进行审核后方可提交处理
        </div>
        <div>
          <el-button
            type="primary"
            round
            class="btnIcon"
            @click="goCode('SMS_BUSINESS_WITHDRAWAL_AUDIT_SWITCH','开通')"
            >确认开通</el-button
          >
        </div>
      </el-card>
      <el-card class="item textWrap">
        <div v-if="withdrawSwitch">
          <span class="bigtitle" style="font-size: 20px; font-weight: bold"
            >提现审核功能</span
          >
          <el-switch
            :value="true"
            active-text="已开通"
            style="float: right; margin-top: 5px"
            @change="goCode('SMS_BUSINESS_WITHDRAWAL_AUDIT_SWITCH','关闭')"
          ></el-switch>
          <el-divider></el-divider>
        </div>
        <div class="title">提现审核使用指南</div>
        <div>
            提现审核功能适用于财务/内控人员对内部发起的提现申请需要审核的场景。
拥有提现权限的成员发起【提现】，判断是否需要审核，完成审核流之后提交三方，所以需要给相应职责的成员分别分配提现权限和提现审核权限，确保有成员可以发起提现、有成员可以进行审核。
        </div>
        <!-- <img src="@/assets/imgs/setting/refund.png" class="img" /> -->
        <div>一、开启提现审核功能</div>
        <div>
          使用管理员账号登录云尘付管理平台，进入对应的应用，点击「设置」-「提现审核开关」开通提现审核功能。
        </div>
        <div>二、成员权限增加</div>
        <div>1、提现发起人权限设置</div>
        <div>
            提现发起人基础权限：登陆云尘付管理平台，点击「企业面板」- 「角色权限」 ，选择相应角色，点击编辑 ，操作权限处选择【提现】。
        </div>
        <div>2、提现审核人权限设置</div>
        <div>
            登陆云尘付管理平台，点击「企业面板」-「角色权限」，选择相应角色，点击编辑，操作权限处选择【提现审核】。
        </div>
      </el-card>
      <el-dialog
        class="aaa"
        :visible.sync="visible"
        :show-close="false"
        :close-on-click-modal="false"
        width="30%"
      >
        <div class="dialogText">
          <i class="el-icon-warning"></i>
            <div>
              <div class="dialogTitle">{{ innerText }}</div>
              <div v-show="paramwithdrawSwitch">
                <div class="dialogHint">
                  <div>开通后，发起提现的订单需要有审核权限的成员审核同意后方可提交请求。</div>
                  <div>
                    请确保有对应成员有提现审核权限，避免造成无人审核的情况。
                  </div>
                </div>
              </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelwithdrawSwitch()" style="width: 120px"
            >取消</el-button
          >
          <el-button type="primary" @click="setwithdrawSwitch" style="width: 120px"
            >确定</el-button
          >
        </span>
      </el-dialog>
      <codeDialogVue
        codeId="7"
        :type="codeType"
        :codeDialog.sync="codeDialog"
        @codeState="codeStateFn"
      />
    </div>
  </template>
  
  <script>
  import codeDialogVue from "@/components/codeDialog.vue";
import { getUserInfo} from "@/utils/public";
  export default {
    name: "settingWithdrawSwitch",
    components: {
      codeDialogVue,
    },
    data() {
      return {
        codeItem: "",
        codeType: "",
        codeDialog: false,
        visible: false,
        withdrawSwitch: false,
        innerText: "",
        paramwithdrawSwitch: true,
      };
    },
    created() {
      this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
        if (res.code === "0000") {
          this.withdrawSwitch = res.data.withdrawalAuditSwitch;
          this.innerText = res.data.withdrawalAuditSwitch
            ? "关闭提现审核功能认证"
            : "开通提现审核功能认证";
        }
      });
    },
    watch: {
      "$store.state.testLine": {
        handler() {
          if(this.$route.name==this.$options.name){
            this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
            if (res.code === "0000") {
              this.withdrawSwitch = res.data.withdrawalAuditSwitch;
              this.innerText = res.data.withdrawalAuditSwitch
                ? "关闭提现审核功能认证"
                : "开通提现审核功能认证";
            }
          });
          }
        },
      },
      deep: true,
    },
    methods: {
      getUserInfo,
      codeStateFn(val) {
        if (val) {
          if (this.codeItem == "开通") {
            this.confirmOpen();
          } else {
            this.confirmClose();
          }
        }
      },
      goCode(val, item) {
        if(getUserInfo().checkFlag){
          if (item== "开通") {
            this.confirmOpen();
          } else {
            this.confirmClose();
          }
        }else{
          this.codeType = val;
        this.codeItem = item;
        this.codeDialog = true;
        }
      },
      cancelwithdrawSwitch() {
        this.visible = false;
        this.paramwithdrawSwitch === true ? false : false;
      },
      confirmOpen() {
        this.paramwithdrawSwitch = true;
        this.visible = true;
      },
      confirmClose() {
        this.paramwithdrawSwitch = false;
        this.visible = true;
      },
      queryMemberInfo() {
        this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
          if (res.code === "0000") {
            this.withdrawSwitch = res.data.withdrawalAuditSwitch;
            this.innerText = res.data.withdrawalAuditSwitch
              ? "关闭提现审核功能认证"
              : "开通提现审核功能认证";
          }
        });
      },
      setwithdrawSwitch() {
            this.$http
              .post(
                `/api/merchant/memberbase/switchWithdrawalAudit`,
                {
                  switchFlag: this.paramwithdrawSwitch,
                }
              )
              .then((res) => {
                this.visible = false;
                if (res.code === "0000") {
                  this.queryMemberInfo();
                }
              });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .withdrawSwitch {
    display: flex;
    .item {
      img {
        width: 650px;
        height: 411px;
      }
    }
    .imgBox {
      text-align: center;
      width: 60%;
      padding-top: 100px;
      .hint1 {
        font-size: 16px;
        font-weight: 600;
        color: #4f595f;
        margin-top: 40px;
        margin-bottom: 12px;
      }
      .hint2 {
        color: #869daa;
      }
      .btnIcon {
        width: 318px;
        height: 50px;
        font-size: 14px;
        border-radius: 35px;
        margin: 40px 0;
        &:first-child {
          margin-right: 30px;
        }
      }
    }
    .textWrap {
      flex: 1;
      margin-left: 20px;
      color: #4f595f;
      padding: 0 20px 20px;
      text-align: justify;
      line-height: 22px;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #1d1c1c;
      }
      div {
        margin-top: 20px;
      }
      .label_ {
        color: #25b5d9;
        margin-left: 0px;
      }
      .img {
        width: 508px;
        height: 221px;
        margin: 40px 0;
      }
    }
    .dialogText {
      display: flex;
      .dialogTitle {
        font-size: 18px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
      }
      .dialogHint {
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        margin-top: 12px;
      }
      .explain {
        font-size: 14px;
        margin-bottom: 10px;
        margin-top: 30px;
      }
      .width274 {
        width: 274px;
      }
      .codeBox {
        display: flex;
      }
      .codeBtn {
        width: 132px;
        height: 32px;
        background: #25b5d9;
        border-radius: 0px 4px 4px 0px;
        text-align: center;
        line-height: 32px;
        color: #ffffff;
        cursor: pointer;
      }
    }
    :deep(.el-dialog__wrapper) {
      .el-dialog__header .aaa {
        padding: 0;
      }
      .el-icon-warning {
        font-size: 18px;
        color: #faad14;
        margin-top: 3px;
        margin-right: 17px;
      }
    }
    :deep(.el-dialog) {
      border-radius: 16px;
    }
  }
  </style>
  